<template>
  <div class="box">
    <h1>练习1-喜欢小狗狗么?</h1>
    <div class="box1">
      <Dog :title="title"></Dog>
      <Dog :title="title"></Dog>
    </div>
    <h1>练习2-点击文字变色</h1>
    <div class="box2">
      <Dog2 :title="title"></Dog2>
      <Dog2 :title="title"></Dog2>
      <Dog2 :title="title"></Dog2>
      <Dog2 :title="title"></Dog2>
      <Dog2 :title="title"></Dog2>
      <Dog2 :title="title"></Dog2>
    </div>
    <h1>练习3-循环显示</h1>
    <div class="box3">
      <Dog3
        v-for="(item, index) in list"
        :key="index"
        :url="item.dogImgUrl"
        :name="item.dogName"
      ></Dog3>
    </div>
    <h1>练习4-选择喜欢的狗</h1>
    <div class="box4">
      <Dog4
        v-for="(item, index) in list"
        :key="index"
        :url="item.dogImgUrl"
        :name="item.dogName"
        @like="likeFn(index)"
      ></Dog4>
      <div class="box4-1">
        <h3>您喜欢的狗如下:</h3>
        <ul>
          <li v-for="(item, index) in arr" :key="index">
            {{ item }}
          </li>
        </ul>
      </div>
    </div>
    <h1>练习5-商品展示</h1>
    <div class="box5">
      <commodity
        v-for="(item, index) in goodsArr"
        :key="index"
        :obj="item"
      ></commodity>
      <p>All Number:{{ sumNumber }}</p>
    </div>
    <h1>练习6-shoppin</h1>
    <div class="box6">
      <div>
        <p>商品清单如下:</p>
        <div v-for="(item, index) in shopping" :key="index">
          {{ item.shopName }} -- {{ item.price }}元/份
        </div>
        <p>请选择购买数量:</p>
      </div>
      <Seven
        v-for="(item, index) in shopping"
        :key="index"
        :shop="item"
        :idx="index"
        @add="addFn(index)"
        @del="delFn(index)"
      ></Seven>
      <p>总价为: {{ Allshop }}</p>
    </div>
  </div>
</template>

<script>
import Dog from "./components/dog";
import Dog2 from "./components/dog2";
import Dog3 from "./components/dog3";
import Dog4 from "./components/dog4";
import commodity from "./components/commodity";
import Seven from "./components/练习7";
export default {
  // 注册组件
  components: {
    Dog,
    Dog2,
    Dog3,
    Dog4,
    commodity,
    Seven,
  },
  data() {
    return {
      title: "这是一条卡哇伊的小狗狗",
      list: [
        {
          dogImgUrl:
            "http://nwzimg.wezhan.cn/contents/sitefiles2029/10146688/images/21129958.jpg",
          dogName: "博美",
        },
        {
          dogImgUrl:
            "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1224576619,1307855467&fm=26&gp=0.jpg",
          dogName: "泰迪",
        },
        {
          dogImgUrl:
            "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2967740259,1518632757&fm=26&gp=0.jpg",
          dogName: "金毛",
        },
        {
          dogImgUrl:
            "https://pic1.zhimg.com/80/v2-7ba4342e6fedb9c5f3726eb0888867da_1440w.jpg?source=1940ef5c",
          dogName: "哈士奇",
        },
        {
          dogImgUrl:
            "https://img0.baidu.com/it/u=108535979,852343132&fm=26&fmt=auto&gp=0.jpg",
          dogName: "小狗",
        },
        {
          dogImgUrl:
            "https://img0.baidu.com/it/u=3683025335,813351062&fm=11&fmt=auto&gp=0.jpg",
          dogName: "萨摩耶",
        },
      ],
      arr: [],
      goodsArr: [
        {
          count: 0,
          goodsName: "Watermelon",
        },
        {
          count: 0,
          goodsName: "Banana",
        },
        {
          count: 0,
          goodsName: "Orange",
        },
        {
          count: 0,
          goodsName: "Pineapple",
        },
        {
          count: 0,
          goodsName: "Strawberry",
        },
      ],
      shopping: [
        {
          shopName: "可比克薯片",
          price: 5.5,
          count: 0,
        },
        {
          shopName: "草莓酱",
          price: 3.5,
          count: 0,
        },
        {
          shopName: "红烧肉",
          price: 55,
          count: 0,
        },
        {
          shopName: "方便面",
          price: 12,
          count: 0,
        },
      ],
    };
  },
  methods: {
    likeFn(idx) {
      this.arr.push(this.list[idx].dogName);
    },
    addFn(index) {
      this.shopping[index].count++;
    },
    delFn(index) {
      this.shopping[index].count == 0
        ? (this.shopping[index].count = 0)
        : this.shopping[index].count--;
    },
  },
  computed: {
    sumNumber() {
      return this.goodsArr.reduce((sum, item) => {
        return (sum += item.count * 1);
      }, 0);
    },
    Allshop() {
      return this.shopping.reduce((sum, item) => {
        return (sum += item.count * item.price);
      }, 0);
    },
  },
};
</script>

<style scoped>
.box1,
.box2,
.box3,
.box4 {
  display: flex;
}
.box2,
.box3,
.box4 {
  /* flex: 4; */
  flex-wrap: wrap;
}
h1 {
  color: #0f0;
}
h3 {
  color: #f0f;
}
li {
  list-style: none;
  display: inline-block;
  margin-right: 10px;
}
</style>